---
title: Getting Started
description: A guide on how to start using the TypeGPU library.
---

import { Tabs, TabItem } from '@astrojs/starlight/components';

## Installing locally

Install TypeGPU using the package manager of your choice.

<Tabs syncKey="package-manager">
  <TabItem label="npm" icon="seti:npm">
    ```sh frame=none
    npm install typegpu
    ```
  </TabItem>
  <TabItem label="pnpm" icon="pnpm">
    ```sh frame=none
    pnpm add typegpu
    ```
  </TabItem>
  <TabItem label="yarn" icon="seti:yarn">
    ```sh frame=none
    yarn add typegpu
    ```
  </TabItem>
</Tabs>

TypeScript doesn't yet ship WebGPU types by default, so we install them separately:

<Tabs syncKey="package-manager">
  <TabItem label="npm" icon="seti:npm">
    ```sh frame=none
    npm install --save-dev @webgpu/types
    ```
  </TabItem>
  <TabItem label="pnpm" icon="pnpm">
    ```sh frame=none
    pnpm add -D @webgpu/types
    ```
  </TabItem>
  <TabItem label="yarn" icon="seti:yarn">
    ```sh frame=none
    yarn add -D @webgpu/types
    ```
  </TabItem>
</Tabs>

Then add the following to your `tsconfig.json`:

```json
{
  "compilerOptions": {
    "types": ["@webgpu/types"],
    // ...
  },
  // ...
}
```

:::note
TypeGPU features related to writing shaders in JavaScript/TypeScript rely on an [additional build tool that hooks into existing bundlers called unplugin-typegpu](/TypeGPU/tooling/unplugin-typegpu). Make sure to set it up as well if you plan on using these features.
:::

## Live Examples

Our [live examples](/TypeGPU/examples) showcase many use-cases of TypeGPU. Feel free to check them out! You can also open each of them on StackBlitz in order to edit the code and see the preview update live, or to bootstrap your own project.

## Troubleshooting

<details>
<summary>WebGPU types are not available</summary>

If WebGPU types, such as `GPUDevice` or `GPUBuffer`, are not recognized in your project, make sure to install the
officially maintained [@webgpu/types](https://www.npmjs.com/package/@webgpu/types) npm package.

<Tabs syncKey="package-manager">
  <TabItem label="npm" icon="seti:npm">
    ```sh frame=none
    npm install --save-dev @webgpu/types
    ```
  </TabItem>
  <TabItem label="pnpm" icon="pnpm">
    ```sh frame=none
    pnpm add -D @webgpu/types
    ```
  </TabItem>
  <TabItem label="yarn" icon="seti:yarn">
    ```sh frame=none
    yarn add -D @webgpu/types
    ```
  </TabItem>
</Tabs>


Then in `tsconfig.json`:
```jsonc
{
  // ...
  "compilerOptions": {
    // ...
    "types": ["@webgpu/types"]
  }
}
```

Or you can use `typeRoots`:
```json
{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@webgpu/types", "./node_modules/@types"]
  }
}
```

</details>

If you encounter any other issues, make sure to look into the rest of our docs, as well as the [WebGPU](https://www.w3.org/TR/webgpu/) or the [react-native-wgpu](https://github.com/wcandillon/react-native-webgpu) documentations. For any further questions, you can contact us via the [Software Mansion Community Discord](https://discord.gg/8jpfgDqPcM) or on [GitHub](https://github.com/software-mansion/TypeGPU).
